<template>
	<view class="coupon_box">
		<view class="coupon-item"   v-for="(item, index) in mycards" :key="index">
			<view class="coupon-money">
				<view class="nick" >{{item.title}}使用</view>
				<view class="layof" style="color:#ff6c00">￥{{item.full_num}}</view>
				<view class="end_time">{{item.time_remark}}</view>
			</view>
			<view class="get-btn" style="color:#ff9000; borderColor:#ff9000;background:#ffffff">未使用</view>
		</view>
		
		<view class="other_type"  v-if="syscards.length>0" >
			<view class="text"><span>系统优惠券</span></view>
		</view>
		<view class="other_type"  v-else >
			<view class="text"><span>没有可用优惠券</span></view>
		</view>
		<view class="coupon-item"   v-for="(item, id) in syscards" :key="id" >
			<view class="coupon-money">
				<view class="nick" >{{item.title}}使用</view>
				<view class="layof" style="color:#005884">￥{{item.full_num}}</view>
				<view class="end_time">{{item.time_remark}}</view>
			</view>
			<view class="get-btn" style="color:#005884;borderColor:#005884;background:#ffffff" @click="getcard(item)">领取</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations} from 'vuex';
	import {isEmptyObj,inWechat} from '../../utils/index.js';
	export default {
		data(){
			return {
				mycards:[],  //领取过的
				syscards:[],    //未领取的
			}
		},
		computed: {
			...mapState('user', ['token']),
		},
		onLoad() {
			this.checkLogin();
		},
		onShow() {
			this.loadMyCards();
			this.loadSysCards();
		},
		methods:{
			checkLogin(){
				if(!this.token){
					return uni.navigateTo({
						url:'/pages/public/login'
					})
				}
				if(isEmptyObj(this.shop)){
					return uni.navigateTo({
						url: '/pages/shop/shop'
					})
				}
			},
			loadSysCards(){
				let param={
					token:this.token,
				}
				this.$ajax.get('bonus/system',param).then(data=>{
					if(0==data.error){
						this.syscards = data.data;
					}
				})
			},
			loadMyCards(){
				let param={
					token:this.token,
				};
				this.$ajax.get('bonus/my',param).then(data=>{
					if(0==data.error){
						this.mycards = data.data;
					}
					
				})
			},
			
			getcard(item){
				let param={
					token:this.token,
					card_id: item.id,
				};
				this.$ajax.get('bonus/get',param).then(data=>{
					console.log(data);
					if(0==data.error){
						//删除列表
						this.syscards.some((titem, index)=>{
			　　　　　　　　　if(titem.id==item.id){
								this.syscards.splice(index, 1)
								return true
							}
			　　　　　　　})
						this.mycards.push(item);
					}else{
						return this.$toast(data.msg);
					}
				})
			}
		}
	}
</script>

<style lang='scss'>
page { background:$bgcolor_white; }
.coupon_box {
	width:100%; height:auto; display:table; padding:6upx 26upx 26upx 26upx;
}

.other_type {
	width:100%; height:90upx; padding-top:50upx;
	
	.text { width:100%; border-top:1px solid #eeeeee; display:block; text-align:center; position:relative; }
	.text span { width:180upx; height:40upx; line-height:40upx; color:#999999; display:block; background:#ffffff; position:absolute; left:50%; top:50%; margin-left:-90upx; margin-top:-20upx; font-size:$font-base; }
}


.coupon-item {
	width:100%; height:auto; display:table; border-radius:10upx; padding:0 20upx; margin-top:22upx; border:1px solid #eeeeee; position:relative;
	.coupon-money {
		width:465upx; height:auto; display:table; float:left; padding:26upx 0; border-style:none dotted none none; border-color:#eeeeee;
		
		.nick { width:100%; height:50upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
		.tit { width:100%; height:50upx; line-height:50upx; font-size:$font-sm; color:$font-color-999; }
		.demand { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
		
		.layof { width:100%; height:48upx; line-height:30upx; font-size:44upx; color:#ff9000; font-weight:bold; }
		.end_time { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:$font-color-999; }
	}
	.get-btn { width:146upx; height:52upx; line-height:50upx; position:absolute; top:50%; right:26upx; margin-top:-26upx; text-align:center; border-radius:60upx; color:#ff9000; border:1px solid #ff9000; font-size:$font-sm; float:right; }
}
.coupon-item:after { width:40upx; height:20upx; position:absolute; left:460upx; top:-1px; border-radius:0 0 40upx 40upx; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-top:0px; }
.coupon-item:before { width:40upx; height:20upx; position:absolute; left:460upx; bottom:-1px; border-radius:40upx 40upx 0 0; content:""; display:block; background:$bgcolor_white; border:1px solid #eeeeee; border-bottom:0px; }
</style>